<template>
    <div class="Router">
    <router-link class="Router_Link" v-for="(user,i) in listObj"  :class=" {'router-link-exact-active':indexadd == i}" :key="i" :to="{path:user.munu,query:{user:i}}">
       
      <a @click="buttonClick(i)" href="">
        <img :src="indexadd==i?user.src1:user.src "  alt />
        <p>
          <a href="./index1.html" :class="indexadd==i?'agg':'add' ">{{user.name}}</a>
        </p>
      </a>
      </router-link>
    
    </div>
        

        
    
</template>
<script>
import images1 from '@/assets/img/底部/images/菜谱_03.png'
import images2 from '@/assets/img/底部/images/发布_05.png'
import images3 from '@/assets/img/底部/images/收藏_05.png'
import images4 from '@/assets/img/底部/images/我的_03.png'
import images5 from '@/assets/img/底部/发布-恢复的_03.png'
import images6 from '@/assets/img/底部/发布-恢复的_06.png'
import images7 from '@/assets/img/底部/发布-恢复的_10.png'
import images8 from '@/assets/img/底部/发布-恢复的_12.png'
export default {
    data:function() {
        return{
          
        indexadd:"0",
         
          listObj:[
        {
          id:1,
          munu:'/',
          src:images5,
          src1:images1,
          name:"菜谱",
        },{
          id:2,
          munu:'/HostRelease',
          src:images6,
          src1:images2,
          name:"发布",
        },{
          id:3,
          munu:'/HostCollection',
          src:images7,
          src1:images3,
          name:"收藏",
        },{
          id:4,
          munu:'/HostMy',
          src:images8,
          src1:images4,
          name:"我的",
        }
          ], 
          
          
        }
  },
  methods:{
    buttonClick: function(i){
        
          this.indexadd=i
          
          // console.log(i)
        }
    
  },
 mounted(){
    if(this.$route.query.user){
      this.indexadd = this.$route.query.user;
    }else{
      this.indexadd = 0;
    }
  }
}
</script>
<style lang="">
.add{
  color: #000;
}
.agg{
  color: #2cd2b9;
}
#app {
  width: 100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
  margin: 0;
  padding: 0;
}
#app .Router {
  width: 100%;
  /* height: 2rem; */
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#app .Router .Router_Link {
  width: 25%;
}
.Router {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
  box-shadow: 0 -2px 5px #f8f8f8;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  margin: 0;
  padding-top: 1%;
  padding-bottom: 1%;
  /* height: 6rem; */
}
.Router_Link {
  text-align: center;
  width: 100%;
}
.Router_Link img {
  width: 1rem;
  height: 1rem;
}
.Router_Link p {
  margin-top: -1px;
  font-size: 0.5rem;
  margin-bottom: -1px;
}

</style>